<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <!-- 
      介绍下 中央事件总线 Vue2

        new 一个空的Vue实例对象
        借助该实例对象上自带的 $on、$off、$emit、$once 等方式来实现一个发布订阅模式

     -->

    <div id="app"></div>

    <script type="module">
      import Vue from "./lib/vue2.esm.browser.js";

      // new 一个空的Vue实例对象
      const EventBus = new Vue();
      console.log("EventBus", EventBus);

      Vue.component("Hello", {
        data() {
          return {
            msg: "~",
          };
        },
        template: `
          <div @click="handleClick">{{ msg }}</div>
        `,
        methods: {
          handleClick() {
            EventBus.$emit("increment", "100");
          },
        },
        mounted() {
          // 定义一个 abcd 事件
          EventBus.$on("abcd", () => {
            console.log("abcd 被触发了");
            this.msg += "~";
          });

          // 做一个计时器
          this.timer = setInterval(() => {
            console.log("1111");
          }, 1000);
        },
        beforeDestroy() {
          // 销毁之前，做收尾工作
          EventBus.$off("abcd");

          clearInterval(this.timer);
        },
      });

      Vue.component("World", {
        data() {
          return {
            count: 1,
          };
        },
        template: `
          <div>
            <button @click="handleClick">{{ count }}</button>
          </div>
        `,
        methods: {
          handleClick() {
            // 触发 abcd 事件
            EventBus.$emit("abcd");
          },
        },
        mounted() {
          EventBus.$on("increment", (payload) => {
            console.log("payload", payload);
            this.count++;
          });
        },
      });

      new Vue({
        el: "#app",

        data() {
          return {
            showHello: true,
          };
        },

        template: `
        <div>
          <button @click="showHello = !showHello">Toggle</button>

          <hr />

          <Hello v-if="showHello" />

          <hr />

          <World />
        </div>
      `,
      });
    </script>
  </body>
</html>
